import { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell } from 'recharts';
import { ForecastData } from '@/types/data';
import useInterval from '@/hooks/useInterval';

const COLORS = ['#00E5FF', '#0088FE', '#FF0080', '#FF7F00'];

export default function ForecastBarChart({ data }: { data: ForecastData[] }) {
  const [chartData, setChartData] = useState<Array<{
    name: string;
    MAE: number;
    MAPE: number;
    RMSE: number;
    R2: number;
  }>>([]);

  const [baseData, setBaseData] = useState(data);

  useEffect(() => {
    const initialData = baseData.map(model => ({
      name: model.name,
      MAE: model.mae,
      MAPE: model.mape,
      RMSE: model.rmse,
      R2: model.r2 * 100 
    }));
    setChartData(initialData);
  }, [baseData]);

  useInterval(() => {
    setChartData(prevData => {
      return prevData.map(item => {
        const randomFactor = () => 1 + (Math.random() * 0.1 - 0.05);
        
        const baseModel = baseData.find(m => m.name === item.name);
        if (!baseModel) return item;
        
        return {
          ...item,
          MAE: baseModel.mae * randomFactor(),
          MAPE: baseModel.mape * randomFactor(),
          RMSE: baseModel.rmse * randomFactor(),
          R2: baseModel.r2 * 100 * randomFactor()
        };
      });
    });
  }, 2000);

  return (
    <div className="flex flex-col h-full">
      <h2 className="text-xl font-medium mb-4 font-['Google_Sans']">预测模型性能对比</h2>
      <div className="flex-1 min-h-[400px]">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={chartData}
            layout="vertical"
            margin={{ top: 20, right: 30, left: 100, bottom: 20 }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke="#444" />
            <XAxis type="number" stroke="#aaa" />
            <YAxis 
              dataKey="name" 
              type="category" 
              stroke="#aaa"
              width={80}
            />
            <Tooltip 
              contentStyle={{ 
                backgroundColor: '#333',
                borderColor: '#555',
                borderRadius: '8px'
              }}
              formatter={(value, name) => {
                if (name === 'R2') {
                  return [`${value}%`, name];
                }
                if (name === 'MAPE') {
                  return [`${value}%`, name];
                }
                return [value, name];
              }}
            />
            <Legend 
              formatter={(value) => {
                if (value === 'R2') return 'R² (%)';
                if (value === 'MAPE') return 'MAPE (%)';
                return value;
              }}
            />
            <Bar dataKey="MAE" fill={COLORS[0]} />
            <Bar dataKey="MAPE" fill={COLORS[1]} />
            <Bar dataKey="RMSE" fill={COLORS[2]} />
            <Bar dataKey="R2" fill={COLORS[3]} />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <div className="text-xs text-gray-500 mt-2">
        <p>MAE: 平均绝对误差 (MV) | MAPE: 平均绝对百分比误差 (%)</p>
        <p>RMSE: 均方根误差 (MV) | R²: 决定系数 (%)</p>
      </div>
    </div>
  );
}
